<template>
    <div style="width: 100%;display: flex;justify-content: center;justify-content: space-evenly">
    <div class="container">
      <!-- 左侧部分 -->
      
      <div class="left-side">
        <h4 class="text-section" style="color: rgb(151, 151, 151);">We are Coming Soon !</h4>
        <h1 class="text-section"  style="color: rgb(0, 0, 0);">All Good Things 
            Come to Those 
            who Wait...</h1>
        <h5 class="text-section" style="font-size: small;color: rgb(0, 0, 0);margin-top: 45px;">Get notified when we launch</h5>
        <div class="button-section">
          <el-input style="height: 45px;width: 250px;margin-right: 10px;" class="custom-input" v-model="email" placeholder="Email" />
          <el-button  style="height: 45px;width: 100px;" class="custom-button" type="primary" @click="handleSubmit">Subscribe</el-button>
        </div>
      </div>
  
      <!-- 右侧部分 -->
      <div class="right-side">
        <img src="@/assets/explore/img/load.png" alt="" class="image" />
      </div>
    </div>
</div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElInput, ElButton, ElMessage } from 'element-plus'
  import { addUserEmail } from "@/api/index";
  const email = ref('')
  
  const handleSubmit = () => {
  
    addUserEmail({email:email.value}).then(res=>{
      if(res.code==200){
        ElMessage({
        message: "success",
        type: 'success',
        plain: true,
      })
      }else{
        ElMessage({
        message: "The mailbox has been sent",
        type: 'error',
        plain: true,
      })
      }
          
      email.value = ""
    })

  }


  </script>
  
  <style scoped>
  .container {
    margin-top: 150px;
    margin-bottom: 150px;
    display: flex;
    width: 1240px;
    max-width: 1240px;
    min-width: 720px;
  }
  
  .left-side {
    width: 400px; /* 根据需要调整宽度 */
    padding: 20px;
    box-sizing: border-box;
    /* border-right: 1px solid #ddd; */
  }
  
  .text-section {
    margin-bottom: 20px;
  }
  
  .button-section {
    display: flex;
   
  }
  
  .right-side {
  }
  
  .image {
    max-width: 100%;
    height: auto;
  }

.el-input .custom-input {
  height: 43px; /* 修改输入框的高度 */
  font-size: 14px; /* 修改字体大小 */
  border-color: purple !important; /* 修改边框颜色为紫色 */
}

.custom-button {
  background-color: rgb(255, 145, 42) !important; /* 修改按钮颜色为橙色 */
  border-color: rgb(255, 145, 42) !important; 
  color: white; /* 按钮文字颜色为白色 */
}
  </style>